<template>
<div id="body">

  <!--顶部标题栏-->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="header-brand">
          <div class="col-md-2">
            <img class="img-responsive" src="../images/logo.png" style="margin-bottom:10%">
          </div>
          <div class="col-md-10">
          简睿捷表单定义工具
          </div>
        </div>
      </div>
    </div>
  </nav>


  <!-- 正文部分 -->
  <div style="margin-top:80px">
    <div style="margin-left:50px">

      <!-- Side bar工具区域 开始-->
      <draggable class="plugin dragArea col-md-2" id="plugin" :list="modules" :options="{group:{name:'list', pull:'clone', put:false }}">
          <div class="box col-md-6" v-for="(item,index) in modules" :key="index">
            <img :src="item.src">
            <p>{{item.name}}</p>
          </div>
      </draggable>

      <!-- Main 表单区域 开始-->
      <draggable id="formContent" :list="formContent" class="dragArea col-md-7" :options="{group:'list',put:true}" @change="cloneElement">
        <div v-for="(element, index)  in formContent"  :key="index" @click="EditCom(element,index)">
          <!--文本框、文本段落、按钮、上传文件、图片-->
          <div v-if="element.type=='text'||element.type=='textarea'||element.type=='button'||element.type=='upload'||element.type=='image'" v-bind:class="{'selected':index==selectedIndex}" v-html="element.codePart1+element.layout+element.codePart2+element.labelLayout+element.codePart3+element.labelName+element.codePart4 +element.contentLayout+element.codePart5">
          </div>
          <!--单选框、复选框、下拉框-->
          <div v-if="element.type=='radio'||element.type=='checkbox'||element.type=='select'" v-bind:class="{'selected':index==selectedIndex}" v-html="element.codePart1+element.layout+element.codePart2+element.labelLayout+element.codePart3+element.labelName+element.codePart4 +element.contentLayout+element.codePart5+element.options+element.codePart6">
          </div>
        </div>
      </draggable>

      <!-- Edit bar表单区域 开始-->    
      <div id="editbar" class="editbar col-md-2">
        <div id="editbarTitle">
          <i class="el-icon-edit"></i>
          控件编辑框
        </div>
        <!--文本框、文本段落、图片、上传文件-->
        <com-one v-if="selectedCom.type=='text'||selectedCom.type=='textarea'||selectedCom.type=='upload'||selectedCom.type=='image'" :selectedCom="selectedCom"></com-one>
        <!--单选框、复选框、下拉框-->
        <com-two v-if="selectedCom.type=='radio'||selectedCom.type=='checkbox'||selectedCom.type=='select'" :selectedCom="selectedCom" :dynamicOptions="dynamicOptions"></com-two>
        <!--按钮-->
        <com-three v-if="selectedCom.type=='button'" :selectedCom="selectedCom" :dynamicOptions="dynamicOptions"></com-three>
        
        <el-row style="position:absolute;top:450px;width:100%">
          <el-col :span="24">
            <el-col :span="6" :offset="4">
              <el-button type="success" @click="confirmEdit()" size="small">确定</el-button>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-button type="danger" @click="resetEdit()" size="small">重置</el-button>
            </el-col>
          </el-col>
        </el-row>
      </div>


      <!-- <div class="clearfix"></div>
      <button onclick="saveform()" class="btn btn-info">保存内容</button>
      <button onclick="delform()" class="btn btn-danger">删除</button>
      <button onclick="emptyform()" class="btn btn-warning">清空表单</button>
      <button onclick="EditControl()" id="swithEdit" class="btn btn-primary pull">开启编辑</button> -->
      <br>
      <!-- <div class="col-md-12">
        <button class="btn btn-primary" @click="pushElement()">PUSH</button>选中：{{selectedTest}}
      </div> -->

    </div>
 </div>
 <!--正文部分  结束-->

</div>
</template>


<script>
import draggable from "vuedraggable";
import data from "../data/data";
import Vue from "Vue";
import comOne from "../components/comOne.vue";
import comTwo from "../components/comTwo.vue";
import comThree from "../components/comThree.vue";
export default {
  data() {
    return {
      modules: data.modules,
      formContent: [],
      selectedCom: {
        layoutOption: "", //整体布局
        labelName: "", //标签名
        labelLayout: "", //标签布局
        contentLayout: "", //内容布局
        style: "", //样式
        type:""  //类别
      },
      selectedIndex: 0,
      //单选框、复选框、下拉列表
      dynamicOptions: [],
    };
  },
  components: {
    draggable: draggable,
    comOne,
    comTwo,
    comThree
  },
  methods: {
    //拖拉组件，复制
    cloneElement: function(evt) {
      if (evt.added) {
        Vue.set(
          this.formContent,
          evt.added.newIndex,
          this.deepCopy(evt.added.element)
        );
      }
      this.dynamicOptions = [];
    },

    //深拷贝
    deepCopy: function(source) {
      var result = {};
      for (var key in source) {
        result[key] =
          typeof source[key] === "object" ? deepCopy(source[key]) : source[key];
      }
      return result;
    },


    //编辑组件
    EditCom: function(element, index) {
      this.selectedIndex = index;
      this.selectedCom.type = element.type;
      this.selectedCom.layoutOption = element.layout;
      this.selectedCom.labelName = element.labelName;
      this.selectedCom.labelLayout = element.labelLayout;
      this.selectedCom.contentLayout = element.contentLayout;
      //按钮
      if (element.type == "button") {
        this.selectedCom.style = element.codePart3.slice(
          0,
          element.codePart3.length - 2
        );
      }
      //单选框、复选框、下拉列表选项
      if (
        element.type == "select" ||
        element.type == "radio" ||
        element.type == "checkbox"
      ) {
        var str = element.options;
        str = str.replace(/<\/?[^>]*>/g, "q"); //去除HTML tag  “q”为自定义分隔符
        str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
        str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
        str = str.replace(/\s+/g, ""); //去除所有空格
        if (element.type == "select") {
          str = str.match(/q(\S*)q/)[1];
          this.dynamicOptions = str.split("qq");
        }
        if (element.type == "radio" || element.type == "checkbox") {
          str = str.match(/qqq(\S*)qq/)[1];
          this.dynamicOptions = str.split("qqqqq");
        }
      }
    },

    //确认编辑
    confirmEdit: function() {
      this.formContent[
        this.selectedIndex
      ].layout = this.selectedCom.layoutOption;
      this.formContent[
        this.selectedIndex
      ].labelName = this.selectedCom.labelName;
      this.formContent[
        this.selectedIndex
      ].labelLayout = this.selectedCom.labelLayout;
      this.formContent[
        this.selectedIndex
      ].contentLayout = this.selectedCom.contentLayout;
      //按钮
      if (this.formContent[this.selectedIndex].type == "button") {
        this.formContent[this.selectedIndex].codePart3 =
          this.selectedCom.style + "'>";
      }
      //下拉列表
      if (this.formContent[this.selectedIndex].type == "select") {
        this.formContent[this.selectedIndex].options = "";
        for (let i = 0; i < this.dynamicOptions.length; i++) {
          this.formContent[this.selectedIndex].options =
            this.formContent[this.selectedIndex].options +
            "<option>" +
            this.dynamicOptions[i] +
            "</option>";
        }
      }
      //单选框
      if (this.formContent[this.selectedIndex].type == "radio") {
        this.formContent[this.selectedIndex].options = "";
        for (let i = 0; i < this.dynamicOptions.length; i++) {
          this.formContent[this.selectedIndex].options =
            this.formContent[this.selectedIndex].options +
            "<div class='radio'><label><input type='radio' name='optionsRadios'>" +
            this.dynamicOptions[i] +
            "</label> </div>";
        }
      }
      //复选框
      if (this.formContent[this.selectedIndex].type == "checkbox") {
        this.formContent[this.selectedIndex].options = "";
        for (let i = 0; i < this.dynamicOptions.length; i++) {
          this.formContent[this.selectedIndex].options =
            this.formContent[this.selectedIndex].options +
            "<div class='checkbox'><label><input type='checkbox' value=''>" +
            this.dynamicOptions[i] +
            "</label> </div>";
        }
      }
    }
  }
};
</script>

<style>
#body {
  padding-right: 20px;
}

.navbar-default {
  height: 50px;
  background-color: #0d8ae6 !important;
}

.header-brand {
  margin-top: 5px;
  font-size: 24px;
  font-family: "幼圆";
  color: white;
}

.logoutCss {
  cursor: pointer;
  margin-left: 20px;
}

.help {
  cursor: pointer;
  color: white;
  margin-left: 10px;
}

.panel {
  height: 500px;
}

#plugin {
  height: 500px;
  text-align: center;
  margin: auto 20px auto auto;
  padding-top: 30px;
  border-radius: 5px;
  border: solid 1px #dddddd;
}

.box {
  padding: 10px 5px 10px 5px !important;
}
.selected {
  color: #0d8ae6;
}
.plugin :hover {
  background-color: #f1f5fa;
  border-radius: 5px;
  cursor: pointer;
}

.plugin img {
  width: 60%;
}

.plugin p {
  margin-top: 6px;
  font-family: "幼圆";
  font-size: 12px;
}

#formContent {
  height: 500px;
  margin: auto 20px auto auto;
  padding-top: 20px;
  border-radius: 5px;
  border: solid 1px #dddddd;
  overflow: scroll;
}

.el-tag {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #cae4ff;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.clearfix {
  margin-top: 15px;
}
#dragLayout i {
  cursor: pointer;
}

#editbar {
  height: 500px;
  border-radius: 5px;
  border: solid 1px #dddddd;
}
#editbarTitle {
  font-family: "幼圆";
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #eaeefb;
}
</style>